<template>
    <div>
         <el-dialog class="car-owner-add" title="照片查看" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
             <div style="height:400px;position: relative;display:flex;flex-direction: column;">
                
                <div class="photo-card">
                    <div v-if="photoList.length == 0" class="none-tip">
                        <i class="el-icon-picture-outline" style="font-size:100px"></i>
                        <span style="font-size:16px">暂未上传照片</span>
                    </div>
                    <img v-else :src="_buillStaticPath(currentImg)" style="height:100%">
                </div>
                
                <div class="photo" v-if="showNoneTag">
                    <div v-if="photoList.length>0" v-for="(item,index) in photoList" :key="index" 
                        class="photo-item"
                        :class="{'photo-item-active':currentIndex==index}"
                        @click="chooseImg(item,index)">
                        <img :src="_buillStaticPath(item.path)" alt="" style="width:100%;height:80px">
                        <!-- <div style="text-align:center">
                            <h5>上传时间:{{_formatTime(item.createTime)}}</h5>
                        </div> -->
                    </div>
                </div>
                
                <div class="btns">
                    <el-upload ref="upload" class="upload-demo" action="/xds/file/photo-upload" :file-list="fileList" :show-file-list="showFileList" :on-success="uploadSuccess" :limit="5">
                        <el-button type="text" size="small">去上传</el-button>
                    </el-upload>
                    <el-button @click="doSaveImage" style="height:30px">提交</el-button>
                </div>

             </div>
         </el-dialog>
    </div>
</template>


<script>
import * as PhotoApi from '@/api/business/photo'
export default {
    data(){
        return{
            dialogVisible:false,
            showNoneTag:true,
            showFileList:false,
            photoList:[],
            filePaths:[],
            photoId: '',
            currentImg:'',
            currentIndex:-1,
            fileList:[]
        }
    },
    methods:{
        show(photoId){
            this.photoId = photoId
            this.photoList = []
            this.showNoneTag = true
            if(photoId){
                PhotoApi.queryByPhotoId(photoId).then(res=>{
                    if(res.data.code === 0){
                        this.photoList = res.data.data
                        if( this.photoList.length>0){
                            this.currentImg = this.photoList[0].path
                            this.currentIndex = 0
                        }
                        this.dialogVisible = true
                    }
                })
            }
        },
        handleClose(){
            this.dialogVisible = false
        },
        uploadSuccess(response) {
            this.showFileList = true
            let filePath = response.data
            this.showNoneTag = false
            if (response.data.indexOf('/static') > -1) {
                filePath = response.data.substr(response.data.indexOf('/static'))
            }
            this.filePaths.push({
                path:filePath,
                photoId: this.photoId||''
            })
        },
        doSaveImage(){
            if(this.photoList.length>=5){
                this.$message.warning('最多上传5张图片')
                this.filePaths = []
                this.fileList = []
                this.showNoneTag = true
                return
            }
            if(this.filePaths.length>0){
                PhotoApi.batchSave(this.filePaths).then(res => {
                    if (res.data.code === 0) {
                        this.filePaths = []
                        this.fileList = []
                        this.showNoneTag = true
                        this.showFileList = false
                        this.show(this.photoId)
                    }
                })
            }
        },
        chooseImg(item,index){
            this.currentImg = item.path
            this.currentIndex = index
        }
    }
}
</script>

<style scoped lang="scss">
.none-tip{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80%;
    border:1px solid #e0e0e0;
    color: #409EFF;
    border-radius: 5px;
}
.photo{
    margin-top:5px;
    border: 1px solid #e0e0e0;
    width: 100%;
    &-item{
        width:20%;
        display:inline-block;
        border: 1px solid #e0e0e0;
        margin-right:0;
        box-sizing: border-box;
        cursor: pointer;
        transition: all ease-in-out;
        &-active{
            border: 3px solid red;
        }
    }
    &-item:hover{
        border: 1px solid #409EFF;
    }
}
.photo-card{
    border: 1px solid #e0e0e0;
    width: 100%;
    height: 250px;
    text-align: center;
    background-color: #e0e0e0;
    padding: 3px;
}
.btns{
    position: absolute;
    bottom: 0;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.upload-demo{
    display: inline-block;
}
</style>